<template>
    <div class="login">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
            <h3 class="h3">叩丁狼商品管理系统</h3>
            <el-form-item prop="username">
                <el-input v-model="ruleForm.username" type="text" placeholder="请输入账号" autocomplete="off" />
            </el-form-item>
            <el-form-item prop="pwd">
                <el-input v-model="ruleForm.pwd" type="password" placeholder="请输入密码" autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
    
<script setup lang='ts'>
import { reactive, ref } from 'vue';
import * as http from '@/request/api'
import Cookies from 'js-cookie'
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user'

const router = useRouter()
const ruleFormRef = ref()
const userStore = useUserStore()
const ruleForm = reactive({
    username: '',
    pwd: ''
})
//账号校验
function validateUser(rule: unknown, value: string | undefined, cb: (msg?: string) => void) {
    if (!value) {
        return cb('请输入账号!')
    } else {
        return cb()
    }
}
//密码校验
function validatePwd(rule: unknown, value: string | undefined, cb: (msg?: string) => void) {
    if (!value) {
        return cb('请输入密码!')
    } else {
        return cb()
    }
}
const rules = reactive({
    username: [{ validator: validateUser, trigger: 'blur' }],
    pwd: [{ validator: validatePwd, trigger: 'blur' }]
})
// 点击发起登录请求
async function submitForm() {
    try {
        await ruleFormRef.value.validate()
        console.log('通过校验')
        const loginRes = await http.admin.adminLogin({
            username: ruleForm.username,
            password: ruleForm.pwd
        })
        if (loginRes.code === 200) {
            // 用Cookie存储token
            Cookies.set('token', loginRes.data.tokenHead + loginRes.data.token)
            // 跳转到首页
            router.push('/index')
        } else {
            ElMessage.error(loginRes.message || '登录请求失败')
        }
    } catch (error) {
        console.log('没有通过校验')
    } finally {
        console.log('finally');
    }


    /*   ruleFormRef.value.validate(async (isValid: boolean) => {
          if (isValid) {
               console.log('通过校验')
              let loginRes = await http.adminLogin({
                  username: ruleForm.username,
                  password: ruleForm.pwd
              })
          } else {
              console.log('没有通过校验')
          }
      }) */

    // ruleFormRef.value.validate().then(() => {
    //     console.log('通过校验')
    //     let loginRes = http.adminLogin({
    //             username: ruleForm.username,
    //             password: ruleForm.pwd
    //         })
    // }).catch(() => {
    //     console.log('没有通过校验')

    // })


}
</script>
    
<style lang="less" scoped>
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #2d3a4b;

    .h3 {
        padding: 10px 0;
        font-size: 24px;
        color: #fff;
        text-align: center;
    }

    .el-input {
        width: 400px;
        height: 38px;
    }

    .el-button {
        width: 100%;
    }
}
</style>